<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">添加栏目</Col>
       </Row>
       <div class="table-box" style="overflow: auto;">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入名称"></Input>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Select v-model="formValidate.type" placeholder="请选择">
                        <Option v-for="(item, index) in catType" :key="index" :value="index">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="模型" prop="modelId" v-if="!formValidate.parentId">
                    <Select v-model="formValidate.modelId" placeholder="请选择">
                        <Option v-for="(item, index) in modelList" :key="index" :value="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述···"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <textarea id="editorAddCat" v-model="formValidate.content" placeholder=""></textarea>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交添加</Button>
                </FormItem>
            </Form>
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var parentId = parseInt(this.$route.query.id);
            var modelId = 0;
            if(parentId != 0){
               modelId = parseInt(this.$route.query.modelId);
            }

           return {
                modelList: null,
                catType: this.$fieldType.catType,
                formValidate: {
                    parentId: parentId,
                    modelId: modelId,
                    name: '',
                    description: '',
                    type: 0,
                    content: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, type: 'number'}
                    ],
                    modelId: [
                        { required: true,}
                    ],
                    content: [
                        { required: true, trigger: 'blur' }
                    ]
                }
           };
        },
        created: function () {
            if(!this.formValidate.parentId){
                // 获取所有模型列表
                this.getModelList()
            }
        },
        mounted() {
          CKEDITOR.replace("editorAddCat", {
             height: "250px",
             width: "100%", 
             toolbar: "Full",
             filebrowserUploadUrl: this.CKeditorUploadPath
          });
          this.editor = CKEDITOR.instances.editorAddCat;
        },
        methods: {
            handleSubmit (name) {
                this.formValidate.content = this.editor.getData();
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var that = this;
                        that.$loading.show('添加中');
                        that.$util.ajax({
                            that: that,
                            url: '/category/add/',
                            data: {
                                parentId: that.formValidate.parentId,
                                name: that.formValidate.name,
                                description: that.formValidate.description,
                                type: that.formValidate.type,
                                modelId: that.formValidate.modelId,
                                content: that.formValidate.content
                            },
                            success: function(data){
                                that.$router.go(-1);
                            },
                            fail: function(msg){
                                that.$Message.info(msg);
                            },
                            complete: function(){
                                that.$loading.hide();
                            }
                        })
                    }
                })
            },
            // 获取所有模型列表
            getModelList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/model/modellist/',
                    success: function(data){
                        that.modelList = data.data;
                        if(that.formValidate.modelId === 0){
                            that.formValidate.modelId = data.data[0]['id'];
                        }
                        that.loading = false;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    }
                })
            }
        }
    }
</script>
<style scoped>
#cke_editorAddCat {
}
</style>